Vue 编译方式

由于 Vue 编译后的特殊性，在 WitFrame! SDK 中无法做到正常开箱即使用。您可以通过另类的方法达到相同目的。

第一步：在 vue.config.js 中添加以下参数：

module.exports = defineConfig({
    ...
    outputDir: "dist",
    assetsDir: 'static',
    publicPath: process.env.NODE_ENV === "production" ? "https://static-api.witframe.com/[app]/[ver]/" : "/",
    ...
})

注：在线上环境，WitFrame! 会自动替换 https://static-api.witframe.com/[app]/[ver]/ 该网址为客户的静态资源网址。

第二步：npm run build 后，会生成类似以下目录文件：

  ./dist/index.html
  ./dist/[app]/[ver]/static/js/chunk-vendors.f237e24f.js
  ./dist/[app]/[ver]/static/js/app.68639290.js
  ./dist/[app]/[ver]/static/css/app.d39fd47b.css

第三步：将指定文件塞入 WitFrame! SDK 目录下（提审成功后即可使用）：

原文件	在 WitFrame! SDK 的位置
./dist/index.html	./[app]/[ver]/views/index.phtml
./dist/[app]/[ver]/static/js/chunk-vendors.f237e24f.js	./[app]/[ver]/static/js/chunk-vendors.f237e24f.js
./dist/[app]/[ver]/static/js/app.68639290.js	./[app]/[ver]/static/js/app.68639290.js
./dist/[app]/[ver]/static/css/app.d39fd47b.css	./[app]/[ver]/static/css/app.d39fd47b.css

注：该方式类似于将自己的静态资源存储至 CDN 中。

第四步：在控制器中添加如下代码：

/[app]/[ver]/controllers/Index.php

class IndexController extends ApiController {

    ...

    public function indexAction() {
        $this->template('index');
    }
...

如何配置打包后接口地址（以vue-cli 打包方式为例）

第一步：在 static 文件夹中新建一个 config.json，把你要写的配置写入

    {
    // 这里的地址本地调试的时候可以换成你本地的地址，线上的时候会自动替换为客户站的地址
    "BASE_URL": "http://www.smple.com"
    }

第二步：在 main.js 中请求定义的配置文件，并放到 Vue.prototype 中，使全局可访问，注意，这里把new Vue()放在请求里执行，是防止请求与页面渲染之间的时间差异化导致值获取不到，因此这样比较保险。

// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
  axios.get('/static/config.json').then((res) => {
    // 基础地址
    Vue.prototype.BASE_URL = res.BASE_URL;

    new Vue({
      el: '#app',
      router,
      store,
     components: { App },
      template: '<App/>',
    })
  })
}

startApp()

第三步：如果在 .vue 文件中使用：

import Vue from 'vue'

console.log(Vue.prototype.BASE_URL)
//http://www.smple.com

uni-app如何配置打包后接口地址

第一步：在 static 文件夹中新建一个 config.js，把你要写的配置写入

const globalData = {
    "BASE_URL": "/apis"
    }

第二步：在 main.js 中引入config.js

import './static/config.js';

第三步：如果在 .vue 文件中使用：

const BASE_URL = globalData.BASE_URL;
console.log(BASE_URL);
//http://www.smple.com

第四步：打开manifest.json文件
找到web配置
index.html模版路径，填写template.h5.html，然后在项目根目录下新建template.h5.html，添加如下内容

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script src="<%= BASE_URL %>static/config.js"></script>
        <script>
            // document.addEventListener('DOMContentLoaded', function() {
            //     document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            // })
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
        <!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
        <!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <script>
            /*BAIDU_STAT*/
        </script>
    </body>
</html>

打开源码视图

"h5" : {
        "publicPath" : "https://static-api.witframe.com/[app]/[ver]/",//[app] 为应用ID [ver] 为版本ID
        "template" : "template.h5.html",
        "router" : {
            "mode" : "history"
        }
    }